<template>
    <div class="order-amount">
        <!-- 订单商品信息 -->
        <OrderPanel>
            <template #header> 金额明细</template>
            <template #main>
                <div class="amount" v-for="item in data" :key="item.name">
                    <div class="desc">{{ item.name }}:</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </template>
        </OrderPanel>
    </div>
</template>

<script setup>
import OrderPanel from './order-panel.vue'
import { reactive, ref, onMounted } from 'vue'
const { orderGoodsINfo, orderInfo } = defineProps([
    'orderGoodsINfo',
    'orderInfo',
])
const data = reactive([
    { name: '商品件数', value: '0' },
    { name: '商品总价', value: '0' },
    { name: '运费', value: '￥9.00' },
    { name: '总额', value: '0' },
])
let number = ref(0)
let goods_price = ref(0)
onMounted(() => {
    number.value = 0
    goods_price.value = 0
    orderGoodsINfo.forEach(e => {
        number.value += e.goods_num
    })
    data[0].value = number.value + '件'
    data[1].value = '￥' + orderInfo.total_price
    let price = (+orderInfo.total_price + 9).toFixed(2)
    data[3].value = '￥' + price
})
</script>

<style lang="scss" scoped>
.amount {
    display: flex;
    justify-content: end;
    font-size: 16px;
    .desc {
        text-align: left;
        margin-right: 40px;
        width: 100px;
    }
    .value {
        width: 100px;
        text-align: right;
        font-size: 18px;
    }
    &:nth-child(4) {
        .value {
            font-size: 20px;
            color: red;
        }
    }
}
</style>
